<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  dir="ltr">
<head>	<title>CSS Circles Example</title>
<style>
		
		.circle {
			border-radius: 50%;
			display: inline-block;
			margin-right: 20px;
		}
		
		#circle1 {
			width: 200px;
			height: 200px;
			background: green;
		}
		
		#circle2 {
			width: 125px;
			height: 125px;
			background: red;
		}
		
		#circle3 {
			width: 100px;
			height: 100px;
			background: blue;
			position: relative;
		}
		
		#circle4 {
			width: 50px;
			height: 50px;
			background: orange;
			position: absolute;
			top: 24%;
			left: 24%;
			display: block;
			border: 3px solid #fff;
		}
		
		@-webkit-keyframes spin {
		  from { -webkit-transform: rotate(0deg); }
		  to { -webkit-transform: rotate(360deg); }
		}

		@-moz-keyframes spin {
		  from { -moz-transform: rotate(0deg); }
		  to { -moz-transform: rotate(360deg); }
		}

		@-ms-keyframes spin {
		  from { -ms-transform: rotate(0deg); }
		  to { -ms-transform: rotate(360deg); }
		}
		
		#advanced {
			width: 200px;
			height: 200px;
			
			background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
			background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
			background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
			
			
			/* webkit chrome, safari, mobile */
			  -webkit-animation-name: spin; 
			  -webkit-animation-duration: 3s; /* 3 seconds */
			  -webkit-animation-iteration-count: infinite; 
			  -webkit-animation-timing-function: linear;

			  /* mozilla ff */
			  -moz-animation-name: spin; 
			  -moz-animation-duration: 3s; /* 3 seconds */
			  -moz-animation-iteration-count: infinite; 
			  -moz-animation-timing-function: linear;

			  /* microsoft ie */
			  -ms-animation-name: spin; 
			  -ms-animation-duration: 3s; /* 3 seconds */
			  -ms-animation-iteration-count: infinite; 
			  -ms-animation-timing-function: linear;
		}
		

		
	</style>
</head>
<body>



	
	<h2>Basic Circles</h2>
	<div id="circle1" class="circle"></div>
	<div id="circle2" class="circle"></div>
	<div id="circle3" class="circle"><div id="circle4" class="circle"></div></div>
	
	<p>&nbsp;</p>
	
	<h2>Spinning Gradient Circle</h2>
	<div id="advanced" class="circle"></div>

		
</section>


</body>
</html>